<template>
  <div class='container-bigbox'>
   <!-- 筛选-->
   <!-- 卡片-->
   <el-card>
     <el-row>
       <!-- 表单 -->
         <el-form label-width="80px" inline size="small">
         <el-form-item label="关键字">
           <el-input v-model="reqParams.keyword" placeholder="请输入关键字"></el-input>
         </el-form-item>
         <el-form-item style="float:right" >
           <el-button @click="clearKey" >清除</el-button>
           <el-button type="primary" @click="search" >查询</el-button>
         </el-form-item>
         </el-form>
     </el-row>
    <!-- 总条数-->
    <el-alert show-icon :closable="false" :title="`总条数 ${total}条`" type="info" style="margin-bottom: 10px"></el-alert>
    <!-- 表格-->
    <el-table :data="randomsList">
      <el-table-column width="150" label="编号" prop="id"></el-table-column>
      <el-table-column width="60" label="题型" prop="questionType">
        <template #default="{row}">
          {{row.questionType | difficultyFilter}}
        </template>
      </el-table-column>
      <el-table-column width="200" label="题目编号" prop="questionIDs">
        <template #default="{row}">
          <a @click="showPre(item.id)" style="color:#8df;display:block" v-for="(item,index) in row.questionIDs" :key="index" href="#">{{item.number}}</a>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width=120 prop="addTime">
      </el-table-column>
      <el-table-column label="答题时间" prop="totalSeconds">
      </el-table-column>
      <el-table-column label="正确率" prop="accuracyRate">
        <template #default="{row}">
          {{row.accuracyRate + '%'}}
        </template>
      </el-table-column>
      <el-table-column label="录入人" prop="userName"></el-table-column>
      <el-table-column style="textalign:center" label="操作" fixed="right">
        <template #default="{row}">
            <ButtonNew @handle="delQus" :id="+row.id" :type="`warning`" :icon="`el-icon-delete`"></ButtonNew>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器-->
    <el-pagination
    class="pager"
    background
    layout="prev, pager, next,sizes,jumper"
    :total="total"
    :page-size="reqParams.pagesize"
    :current-page="reqParams.page"
    @current-change='changePager'
    @size-change="changeSize"
    :page-sizes='[20,30,40,50]'
    ></el-pagination>
    <!-- 页码选择 -->
   </el-card>
    <!-- 预览 -->
    <QuestionsPre :options="options" :queDetail="queDetail" @closePre="closePre" :dialogVisible="dialogVisible"></QuestionsPre>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
import QuestionsPre from '../components/questions-preview.vue'
export default {
  name: 'subjects-page',
  components: { QuestionsPre },
  data () {
    return {
      // 筛选参数
      reqParams: {
        // 页码
        page: 1,
        // 尺寸
        pagesize: 20,
        // 关键字
        keyword: null
      },
      dialogVisible: false,
      queDetail: {},
      options: [],
      // 组题列表
      randomsList: [],
      // 总条数
      total: 0,
      // 添加学科弹框
      currSubject: {}
    }
  },
  created () {
    this.getRandoms()
  },
  methods: {
    // 获取相关信息
    getRandoms () {
      randoms({ ...this.reqParams })
        .then(({ data }) => {
          console.log(data)
          this.total = data.counts
          this.randomsList = data.items
        })
    },
    // 删除
    delQus (id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 1. 发送请求
        removeRandoms({ id }).then((res) => {
          this.$message.success('删除成功')
          this.getRandoms()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 清空搜索框
    clearKey () {
      this.reqParams.keyword = null
      this.getRandoms()
    },
    // 搜索
    search () {
      this.getRandoms()
    },
    // 展示预览
    showPre (id) {
      console.log(id)
      detail({ id }).then(({ data }) => {
        console.log(data)
        if (data.options) {
          this.options = data.options
          this.queDetail = data
          console.log(data.options)
        }
      })
      this.dialogVisible = true
    },
    // 关闭预览
    closePre () {
      this.dialogVisible = false
    },
    // 分页
    changePager (newPage) {
      this.reqParams.page = newPage
      this.getRandoms()
    },
    // 改变尺码的条数是发送请求
    changeSize (newSize) {
      // 改变时尺码来到第一页
      this.reqParams.page = 1
      // 让每页的条数发生相应的变化
      this.reqParams.pagesize = newSize
      // 重新渲染
      this.getRandoms()
    },
    indexMethod (index) {
      return index + 1 + (this.reqParams.page - 1) * this.reqParams.pagesize
    }
  }
}
</script>

<style scoped lang='scss'>
.container-bigbox{
  padding: 10px 15px;
  .pager{
    margin: 15px 0;
    float: right;
  }
}
.el-link{
margin-right: 10px;
}
</style>
